<template>
	<div class="noticeList">
		<div class='my-header'></div>
		<div class="listmain">
			<PullRefreshList 
                v-model:refreshing="refreshing" 
                v-model:loading="loading"
                v-model:finished="finished" 
                v-model:list="list" 
                @load="onLoad"
            >
				<van-cell 
                    v-for="(item, index) in list" 
                    :key="index" 
                    :title='`类型：${item.szItemDirect.szid_ex11} &nbsp;`'
                    center 
                >
					<template #label>
						<div>下单人姓名：{{ item.szItemDirect.szid_ex4 }}</div>
						<div>下单时间：{{ item.szItemDirect.szid_dat1 }}</div>
						<div>是否接单：{{ item.szItemDirect.szid_ex2 }}</div>
						<div>是否完成：{{ item.szItemDirect.szid_ex3 }}</div>
						<div>服务明细：{{ item.szItemDirect.szid_ex9 }}</div>
						<!-- <van-image 
							v-for="(item2, index2) in item.img.split(',')"
							:key="'img-' + index2"
							width="15vw" 
							height="15vw" 
							fit="fill" 
							:src="item.img"
							style="margin: 1vw"
							@click="showImagePreview({
								images: item.img.split(','),
								startPosition: index2,
							})"
						>
						</van-image>
						<div class="video-box">
							<video 
								:ref="'videoRef'+index" 
								width="100%" 
								class="video-class"
								:src="item.videoUrl"
								autoplay
								muted
								loop
								controls
								@loadedmetadata="onLoadedmetadata"
								@play="play"
							>
							</video>
						</div> -->
                    </template>
                    <template #value>
                        <!-- <van-button 
                            type="danger" 
                            size="mini"
                            @click.stop="cancel(item)"
                        >
                            取消订单
                        </van-button> -->
						<van-button 
                            type="primary" 
                            size="mini"
                            @click.stop="routerPush(item)"
                        >
                            评价
                        </van-button>
                    </template>
                </van-cell>
			</PullRefreshList>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue'
    import type { Ref } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, showSuccessToast, closeToast, showImagePreview   } from 'vant'
	import PullRefreshList from '@/components/PullRefreshList.vue'
    import { fxygmAllListApi, cancelYuyueInfoApi } from '@/apis'

    const router = useRouter()
    const route = useRoute()

	import { useStore } from '@/store'
    const store = useStore()

	const page: Ref<number> = ref(1)
	const pageNum: Ref<number> = ref(20)

	const list: Ref<Array<any>> = ref([])
	const loading: Ref<boolean> = ref(false)
	const finished: Ref<boolean> = ref(false)
	const refreshing: Ref<boolean> = ref(true)
	const onLoad = async(callback) => {
		console.log(111)
		if (list.value.length == 0) {
			page.value = 1
			pageNum.value = 20
		} else {
			page.value++
		}
		let val = await fxygmAllListApi({
            openid: store.openid,
			page: page.value.toString(), //页
			pageNum: pageNum.value.toString(), //每页条数
			szid_ex3: 'Y'
        })
		list.value.push(...val)
		// 如果没数据了就调用
		if (val.length == 0) {
			callback(true)
		} else {
			callback(false)
		}
	}
	const routerPush = (val) => {
		// 后面看是跳转还是什么
		console.log(val)
		router.push(`/satisfactionSurvey?szid_id=${val.szItemDirect.szid_id}`)
	}
    const cancel = (val) => {
        showConfirmDialog({
            title: '提示',
            message: '确定取消订单？'
        }).then(() => {
			showLoadingToast({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			});
			cancelYuyueInfoApi({
				sh_id: val.sh_id
			}).then(async res => {
				closeToast();
				showSuccessToast({
					message: res[0].msg,
				});
				list.value = []
				loading.value = true
				finished.value = false
				let val = await fxygmAllListApi({
					openid: store.openid,
					page: page.value.toString(), //页
					pageNum: pageNum.value.toString(), //每页条数
					szid_ex3: 'Y'
				})
				list.value.push(...val)
				loading.value = false
				finished.value = true
			}).catch(err => {
				closeToast();
			})
        }).catch(err => {
			// showConfirmDialog({
			// 	title: '提示',
			// 	message: '取消订单失败！'
			// })
        })
    }
    // const videoUrl: Ref<any> = ref('') //逝者生平视频 http://vjs.zencdn.net/v/oceans.mp4

	// const videoRef: Ref<any> = ref(null)
    const onLoadedmetadata = () => {
        // videoRef.value.play()
        // nextTick(() => {
        //     videoRef.value.muted = false
        //     videoRef.value.play()
        // })
    }
    const play = () => {
        // videoRef.value.muted = false
        // videoRef.value.play()
    }
</script>

<style lang="scss" scoped>
	.noticeList {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
        background: url(@/assets/bg/bg11.png);
        background-size: 100% 100%;
	}
        // background: url(@/assets/policy/policybg-car.png) no-repeat;
    .my-header {
        display: flex;
        justify-content: center;
        // background: url(@/assets/policy/policybg.png) no-repeat;
        // background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    
    .my-header::after {
        content: '';
        width: 100%;
        height: 185px;
        // margin-top: 20px;
        // background: url(@/assets/banner/gmjs_bg.png);
        background: url(@/assets/policy/policybg-car.png) no-repeat;
        background-size: 110% 110%;
        background-position: 30% 50%;
        border-radius: 5px;
    }
	// .my-header {
	// 	display: flex;
	// 	justify-content: center;
	// 	background: url(@/assets/policy/policybg.png) no-repeat;
	// 	background-size: 100% 90%;
	// 	margin-bottom: 10px;
	// 	border-radius: 10px;
	// }

	// .my-header::after {
	// 	content: '';
	// 	width: 95%;
	// 	height: 185px;
	// 	margin-top: 20px;
	// 	background: url(@/assets/banner/gmjs_bg.png);
	// 	background-size: 100% 100%;
	// 	border-radius: 5px;
	// }

	.my-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	.maindiv {
		width: 90%;
		/* border: 1px solid #2C3E50; */
		box-shadow: 0px 0px 5px 5px #e3eee9;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 25px;
	}

	.maindivfont1 {
		color: #333333;
		font-size: 12pt;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.maindivfont2 {
		color: #666666;
		font-size: 10pt;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.listmain {
		flex: 1;
		overflow: auto;
	}
	.video-box {
		width: 65vw;
		height: 45vw;
		.video-class {
			width: 100%;
			height: 100%;
		}
	}
</style>